<template>
  <Drawer
    v-model="show"
    :title="title"
    :size="1024"
    @close="closeDrawer"
  >
    <template #content>
      <el-table
        :data="list"
        stripe
        border
        :header-cell-style="{
          background: '#F5F7FA',
          color: '#818588'
        }"
      >
        <el-table-column label="序号" width="65px">
          <template #default="{ $index }">
            {{ $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          label="单价(元/吨)"
          prop="price"
          min-width="100px"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="计划量(吨)"
          prop="planAmount"
          min-width="100px"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="完成量(吨)"
          prop="actualWeight"
          min-width="100px"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="剩余量(吨)"
          prop="actualSurplusAmount"
          min-width="100px"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="派单量(吨)"
          prop="orderDispatchAmount"
          min-width="100px"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="发货在途量(吨)"
          prop="inTransitAmount"
          min-width="120px"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="预估剩余量(吨)"
          prop="forecastSurplusAmount"
          min-width="120px"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="顺延吨数(吨)"
          prop="additionalValue"
          min-width="120px"
          :show-overflow-tooltip="true"
        />
      </el-table>
    </template>
    <template #footer>
      <el-button type="primary" @click="closeDrawer">
        关闭
      </el-button>
    </template>
  </Drawer>
</template>
<script lang="ts" setup>
import * as salesPlanApi from '@/api/salesPlan'

const title = ref('详细信息')
const show = ref(false)
const loading = ref(false)
const emit = defineEmits(['close'])

const list = ref([])

const open = async (batchId) => {
  getList(batchId)
  show.value = true
}

const getList = async (batchId) => {
  const res = await salesPlanApi.getSmallPackageList({
    batchId
  })
  list.value = res || []
}

const closeDrawer = () => {
  show.value = false
  emit('close')
}

defineExpose({ open })
</script>
<style lang="scss" scoped></style>
